<template>
  <div class="cons_doctor_grid">
    <template v-if="hasHoctor>0">
      <div
        class="cons_doctor_item"
        v-for="(item,index) in doctorData"
        :key="index"
        :class="item.selected?'doctor_item_selected':''"
      >
        <div class="cons_doctor_info">
          <div class="avatar">
            <img v-if="item.userPhoto" :src="item.userPhoto"/>
            <img v-else src="~@/assets/images/doctor_lg.png"/>
          </div>
          <div class="info">
            <p>
              姓名：
              <span class="txt">{{item.userName}}</span>
            </p>
            <p>职称：{{item.position | positionFlr}}</p>
          </div>
        </div>
        <div class="cons_doctor_navs">
          <el-button
            class="nav_btn"
            size="mini"
            type="primary"
            plain
            @click="goDoctorDetails(index)"
          >详情</el-button>
          <template v-if="!selectDisabled">
            <div
              v-if="applyTheme == '3'"
              :class="item.selected"
              class="doctor_selected_btn"
              @click="selectedDoctorMDT(item,index)"
            >选择</div>
            <el-button
              v-else
              class="nav_btn"
              size="mini"
              type="primary"
              plain
              @click="selectedDoctor(index)"
            >选择</el-button>
          </template>
        </div>
        <!-- <div class="zz_box" v-if="!selectDisabled && item.selected">
          <el-radio v-model="zzIdSelect" @change="zzChange" :label="item.id">
            <span>主责</span>
          </el-radio>
        </div>-->
      </div>
    </template>
    <div v-else class="search_none">
      <img src="~@/assets/images/search-none.png" alt/>
      <p class="txt">暂无记录~</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    doctorData: {
      type: Array,
      default: []
    },
    selectDisabled: {
      type: Boolean,
      default: false
    },
    // 申请主题
    applyTheme: {
      type: String
    }
  },
  data() {
    return {
      selectedDocotrArr: [],
      zzIdSelect: '',
      hasHoctor: 0
    }
  },
  watch: {
    doctorData() {
      this.hasHoctor = this.doctorData.length
      // console.log(this.doctorData)
    }
  },
  filters: {
    positionFlr(val) {
      return val || '-'
    }
  },
  methods: {
    goDoctorDetails(index) {
      this.$emit('doctorDetails', { index: index, btnShow: this.applyTheme === '3' })
    },
    selectedDoctor(index) {
      this.$emit('selectedDoctor', this.doctorData[index])
    },
    selectedDoctorMDT(doctor, index) {
      // const _idx = this.selectedDocotrArr.findIndex(item => item.id == doctor.id)
      if (this.doctorData[index].selected) {
        // this.selectedDocotrArr.splice(_idx, 1)
        this.doctorData[index].selected = ''
      } else {
        // this.selectedDocotrArr.push(doctor)
        this.$set(this.doctorData[index], 'selected', 'selected_active')
      }
    },
    zzChange() {
      // console.log(this.zzIdSelect);
      // this.$emit('zzIdSelected', this.zzIdSelect)
    }
  }
}
</script>

<style lang="scss" scoped>
.cons_doctor_grid {
  display: flex;
  flex-wrap: wrap;
  .cons_doctor_item {
    position: relative;
    width: 188px;
    border: solid 1px #ddd;
    border-radius: 6px;
    text-align: center;
    padding: 15px 0;
    margin: 10px;
    .zz_box {
      position: absolute;
      left: 5px;
      top: 5px;
      z-index: 2;
    }
    .cons_doctor_info {
      .info {
        font-size: 14px;
        color: #333;
        padding: 10px 0 20px;
        .txt {
          vertical-align: middle;
          display: inline-block;
          max-width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .avatar {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        img {
          display: block;
          width: 100%;
          height: 100;
        }
      }
    }
    .doctor_selected_btn {
      display: inline-block;
      padding: 7px 15px;
      font-size: 12px;
      border-radius: 3px;
      color: #00c0ef;
      background: #ecf5ff;
      border: solid 1px #b3d8ff;
      box-sizing: border-box;
      line-height: 1;
      margin-left: 10px;
      cursor: pointer;
      &:hover {
        color: #ecf5ff;
        background: #00c0ef;
        border: solid 1px #00c0ef;
      }
    }
    .selected_active {
      color: #ecf5ff;
      background: #00c0ef;
      border: solid 1px #00c0ef;
    }
    &:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
  }
  .doctor_item_selected {
    border-color: #00c0ef;
  }
}
.search_none {
  width: 100%;
  text-align: center;
  padding: 100px 0;
  .txt {
    padding: 10px 0;
    font-size: 16px;
    color: #ccc;
  }
}
</style>
